<script>
import FilterInput from './FilterInput'

export default {
  name: 'TheadFix',

  components: { FilterInput },

  props: {
    maxDepth: {
      type: Number,
      default: 0
    },

    rowHeight: {
      type: Number,
      default: 0
    },

    fixData: {
      type: Array,
      default: () => []
    },

    direction: {
      type: String,
      default: 'left'
    },

    headerCellStyle: {
      type: Function
    },

    showFilterPopover: {
      type: Function
    },

    filterPool: {
      type: Array,
      default: () => []
    },

    filterable: {
      type: Boolean,
      default: false
    },

    updateFilterPool: {
      type: Function
    },
    leftDistance: {
      type: Number,
      default: 0
    },
    isFarRight: {
      type: Boolean,
      default: false
    }
  },

  mounted() {
    this.$nextTick(() => {
      const headFix = this.$refs.headFix
      if (this.direction === 'left') {
        headFix.style.left = '0'
      } else {
        headFix.style.right = '0'
      }
    })
  },

  computed: {
    tableWidth() {
      let width = 0
      for (let i = 0, len = this.fixData.length; i < len; i++) {
        const current = this.fixData[i]
        if (current.width) {
          width = width + current.width
        } else {
          width = width + 150
        }
      }
      return width
    }
  },

  methods: {
    tdDivStyle(currentTd) {
      if (this.headerCellStyle) {
        return this.headerCellStyle({ col: currentTd.col, depth: currentTd.depth, td: currentTd })
      } else {
        return ''
      }
    },

    filterTr() {
      if (this.filterable) {
        const tdList = this.fixData.map(item => {
          return (
            <td style={{ width: item.width + 'px', height: this.rowHeight + 'px' }}>
              <div class="td-div">
                <FilterInput
                  currentTd={item}
                  filterPool={this.filterPool}
                  updateFilterPool={this.updateFilterPool}
                  showFilterPopover={this.showFilterPopover}
                />
              </div>
            </td>
          )
        })
        return <tr>{tdList}</tr>
      } else {
        return ''
      }
    },

    makeColgroup() {
      return (
        <colgroup>
          {this.fixData.map(item => (
            <col width={item.width} />
          ))}
        </colgroup>
      )
    }
  },

  render() {
    const tableStyle = {
      width: this.tableWidth + 'px',
      boxShadow:
        (this.leftDistance > 0 && this.direction === 'left'
          ? '6px 6px 6px -4px rgba(0,0,0,.2)'
          : '') ||
        (this.isFarRight && this.direction === 'right' ? '' : '-6px 6px 6px -4px rgba(0,0,0,.2)')
    }

    const tdStyle = this.filterable ? { height: this.rowHeight * this.maxDepth + 'px' } : {}

    return (
      <table class="t-head-fix" ref="headFix" style={tableStyle}>
        {this.makeColgroup()}
        <tr>
          {this.fixData.map(item => {
            return (
              <td style={tdStyle}>
                <div class="td-div" style={this.tdDivStyle(item)}>
                  {item.label}
                </div>
              </td>
            )
          })}
        </tr>
        {this.filterTr()}
      </table>
    )
  }
}
</script>
<style scoped>
.t-head-fix {
  height: 100%;
  position: absolute;
  top: 0;
  border-collapse: collapse;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
}

.t-head-fix td {
  padding: 0;
  /* height: 40px; */
  position: relative;
}

.t-head-fix .td-div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  background-color: #e4e4e4;
  font-weight: bold;
  color: #909399;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
}
</style>
